<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/iconfont.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <!-- <script src="js/jquery-1.9.1.min.js"></script> -->
    <script src="js/f.js"></script>
    <title>Equipment Management</title>
</head>

<body>
<div id="app">
    <div class="PublicHead clearfix">
        <div class="leftBox clearfix">
            <!--<i class="iconfont icon-caidan"></i>-->

            <div class="companyText">
                Smart Home Management System
            </div>
        </div>
        <div class="RightBox clearfix">
            <div class="UserPhotoBox">
                <div class="UserPic">
                    <img src="images/user.jpg" />
                </div>
                <div class="UserName" id="UserName">

                </div>
            </div>
            <a href="/logout">
                <div class="dropOutBox">
                    <i class="iconfont icon-app_icons--">
                    </i>
                    <span>Exit</span>
                </div>
            </a>
        </div>
    </div>

    <div class="PublicDownWhole clearfix">
        <!--左侧-->
        <div class="leftBox Js_leftBox">
            <ul>
                <a href="/equipment">
                    <li class="Select"><i class="iconfont icon-weibiaoti1"></i><span>Equipment</span></li>
                </a>
                <a href="/register">
                    <li><i class="iconfont icon-yonghuguanli"></i><span>Modify Infomation</span></li>
                </a>
                <a href="/register">
                    <li><i class="iconfont icon-tubiao_dingdan"></i><span>Modify Password</span></li>
                </a>
            </ul>
        </div>
        <!--右侧-->
        <div class="RightBox">
            <div class="PublicContentBox">
                <!--公用指向页面名字-->
                <div class="PublicPointToAgeText">
                    <span class="span1">Equipment Management </span>
                </div>
                <!--查询-->
                <!-- 
                <div class="InquireBox clearfix">
                    <div class="InquireleftBox">
                        <div class="Text">订单号：</div>
                        <div class="InputDiv">   <input class="phoneInput" placeholder="请输入你需要查询的订单号" /></div>
                    </div>
                    <div class="PublicBtnIcon Color1Btn fr">
                        <i class="iconfont icon-icon-chaxun"></i>
                        <span>查询</span>
                    </div>
                </div> -->
                <!--表修改-->
                <div class="InquireTableBox">
                    <div class="headbox">
                        <!--批量Delete-->
                        <div class="PublicBtnIcon Color5Btn">
                            <i class="iconfont  icon-shanchu"></i>
                            <span>Delete</span>
                        </div>

                        <div class="PublicBtnIcon Color5Btn fr Js_edit">
                            <i class="iconfont icon-changyongtubiao-mianxing-"></i>
                            <span>Add</span>
                        </div>
                    </div>

                    <!--设备-->

                    <div class="InquireSelectTable">
                        <table class="PublicTableCss">
                            <thead>
                                <tr>
                                    <td>
                                        <!-- <input id="inputcheck" class="inputcheck" type="checkbox" name="inputcheck" /> -->
                                        <label for="inputcheck"></label>
                                        <span>Equipments</span>
                                    </td>
                                    <td>Type</td>
                                    <td>Pic</td>
                                    <td>Infomation </td>
                                    <td>Operation</td>
                                </tr>

                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Door</td>
                                    <td><img class="DOOR" :src="'images/door/'+doorState+'.png'" height=40 width=40>
                                    </td>
                                    <td><span id="DOOR">{{doorState?"Open":"Closed"}}<br>Open Count: {{doorCount}}</span></td>
                                    <td><button class="door" id="door" @click="changedoor">{{doorState?"Close":"Open"}}</button><br>
                                        <div class="PublicBtnIcon Color5Btn fr2 Js_edit2">
                                            <!-- <i class="iconfont icon-changyongtubiao-mianxing-"></i> -->
                                            <span>Modify Password</span>
                                        </div>
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Window</td>
                                    <td><img class="WINDOW" :src="'images/window/'+winState+'.png'" height=40 width=40>
                                    </td>
                                    <td><span id="WINDOW">{{winState?"Open":"Closed"}}<br>Open Count: {{winCount}}</span></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Cover</td>
                                    <td><img class="COVER" :src="'images/cover/'+coverState+'.png'" alt="Closed"
                                            height=40 width=40>
                                    </td>
                                    <td><span id="COVER" style="white-space: pre-wrap;">{{(coverState==1?("Auto on Illu: "+coverOpenIllu):(coverState==2?"Open":"Closed"))+"\nNow Illu: "+coverIllu}}<br></span></td>
                                    <td>
                                        <table v-if="coverState==1">
                                            <tr>
                                                <td><span class="demonstration">Auto on Illu..</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="appCov">
                                                        <el-slider v-model="coverOpenIllu" :step="1" :min="0" :max="40" @change="changecoveropenillu">
                                                        </el-slider>
                                                    </div>
                                                </td>
                                                <td>
                                                    <button class="cover1" id="cover1" @click="changecover">{{coverState==2?"Close":(coverState?"Open":"Auto")}}</button>
                                                </td>
                                            </tr>
                                        </table>
                                        <button v-else class="cover1" id="cover1" @click="changecover">{{coverState==2?"Close":(coverState?"Open":"Auto")}}</button>
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Fan</td>
                                    <td><img class="FAN" :src="'images/fan/'+fanState+'.png'" alt="Closed" height=40
                                            width=40></td>
                                    <td><span id="FAN" style="white-space: pre-wrap;">{{(fanState==1?("Auto on Temp.: "+fanOpenTemp):(fanState==2?"Open":"Closed"))+"\nNow Temp.: "+fanTemp+"\nNow Humi.: "+fanHumi}}</span></td>
                                    <td>
                                        
                                        <table v-if="fanState==1">
                                            <tr>
                                                <td><span class="demonstration">Auto on Temp.</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="app11">
                                                        <el-slider v-model="fanOpenTemp" :step="0.1" :min="16" :max="32" :marks="marksFan" @change="changefanopentemp">
                                                        </el-slider>
                                                    </div>
                                                </td>
                                                <td>
                                                    <button class="fan1" id="fan1" @click="changefanstate">{{fanState==2?"Close":(fanState?"Open":"Auto")}}</button>
                                                </td>
                                            </tr>
                                        </table>
                                        <button v-else class="fan1" id="fan1" @click="changefanstate">{{fanState==2?"Close":(fanState?"Open":"Auto")}}</button>
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Lamp</td>
                                    <td><img class="LAMP" :src="'images/lamp/'+lampState+'.png'" alt="Closed" height=40
                                            width=40></td>
                                    <td><span id="LAMP"></span></td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td><span class="demonstration">Luminance</span></td>
                                                <td><span class="demonstration">Colour</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="applamp">
                                                        <el-slider v-model="lampState" :step="1" :max="5" :show-stops="true" @change="changelevel">
                                                        </el-slider>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div id="appcolor">
                                                        <el-color-picker v-model="lampColor" @change="changelight"></el-color-picker>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- <button class="lamp" οnclick="changelamp()">Change</button> -->
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Fire Alarm</td>
                                    <td><img class="FIRE" :src="'images/fire/'+fireAlarm+'.png'" alt="Safe" height=40
                                            width=40></td>
                                    <td><span id="FIRE">{{fireAlarm?"Warning":"Safe"}}</span></td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td>
                                        <input id="aa" class="inputcheck" type="checkbox" name="inputcheck" />
                                        <label for="aa"></label>
                                    </td>
                                    <td>Security Alarm</td>
                                    <td><img class="SEC" :src="'images/sec/'+secMode+'.png'" alt="Off" height=40
                                            width=40></td>
                                    <td><span id="SEC">{{secMode?"Security Mode":"At-home Mode"}}</span></td>
                                    <td><button class="sec" id="sec" @click="changesec">{{secMode?"OFF":"ON"}}</button></td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- <div class="ModifyUserBoxOut">
                        <div class="ModifyLastBox clearfix">
                            <br /><br /><br />
                            <input type="submit" class="RightBox" name ="submit" value="Modify"/>
                        </div><br /><br /><br /><br /><br /></div>
                    </div> -->

                    <!--分页-->
                    <!-- <div class="PageNumber">
                        <div class="NumbersBox">
                            <div class="LeftArrow">
                                上一页
                            </div>
                            <ul>
                                <li class="Select">1</li>
                                <li class="">2</li>
                                <li class="">...</li>
                                <li class="">4</li>
                                <li class="">5</li>
                            </ul>
                            <div class="RightArrow ">
                                下一页
                            </div>
                        </div>
                    </div> -->


                </div>
            </div>
            <br />
            <br />

        </div>
    </div>


    <!-- alert通用 提示是否Delete-->
    <div class="PublicFloatBox f_delete">
        <div class="f_MiddleBox wid260">
            <div class="f_Head">
                <span>Hint Message</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content clearfix">
                <!--Hint Message内容-->
                <div class="f_someText">
                    <i class="iconfont icon-tishi"></i>
                    <span>Delete this for sure?</span>
                </div>
                <!--按钮-->
                <div class="f_pormatBtn  clearfix">
                    <el-button type="primary">Confirm</el-button>
                    <div class="f_pormatBtn2">
                        Delete
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Add User浮层-->
    <div class="PublicFloatBox adduser">
        <div class="f_MiddleBox wid400">
            <div class="f_Head">
                <span>Add Equipment</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content">
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        Equipment ID:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" />
                    </div>
                    <!--Hint Message-->
                    <div class="f_pormat">
                        Please input correct ID
                    </div>
                </div>
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        Phone Number:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" />
                    </div>
                    <!--Hint Message-->
                    <div class="f_pormat">
                        Please input correct Phone Number
                    </div>
                </div>
                <div class="f_alonediv1">
                    <div class="f_alone_name">
                    </div>
                    <div class="f_alone_input1">
                        <!--publicbtn-->
                        <div class="publicf_btn">
                            <div class="publicf_btn1">
                                Conform
                            </div>
                            <div class="publicf_btn2 fr Js_closeBtn">
                                Cancel
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="PublicFloatBox password">
        <div class="f_MiddleBox wid400">
            <div class="f_Head">
                <span>Modify Password</span>
                <i class="Js_closeBtn2 iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content">
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        New Password:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" id="psw1"/>
                    </div>
                </div>
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        Again:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" id="psw2"/>
                    </div>
                </div>
                <div class="f_alonediv1">
                    <div class="f_alone_name">
                    </div>
                    <div class="f_alone_input1">
                        <!--publicbtn-->
                        <div class="publicf_btn">
                            <el-button type="primary" @click="changedoorpsw">Confirm</el-button>
                            <div class="publicf_btn2 fr Js_closeBtn2">
                                Cancel
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<!--返回顶部-->
<a href="javaScript:void();" class="back-to-top"><i class="iconfont icon-fanhuidingbu"></i> </a>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    window.onload = function () {
        axios.get('/userinfo').then((response) => {
            document.getElementById("UserName").innerHTML = "Hi !  " + response.data.username;
        });
    }
    var appG = new Vue({
        el: '#app',
        data() {
            return {
                doorID:"",
                doorState: 0,
                doorCount: 0,
                winID:"",
                winState: 0,
                winCount: 0,
                coverID:"",
                coverState: 0,
                coverIllu: 0,
                coverOpenIllu: 0,
                fanID:"",
                fanState: 0,
                fanTemp: 0,
                fanHumi: 0,
                fanOpenTemp: 0,
                lampID:"",
                lampState: 0,
                lampOpt: 0,
                lampR: 0,
                lampG: 0,
                lampB: 0,
                lampColor: '',
                fireID:"",
                fireAlarm: 0,
                secID:"",
                secMode: 0,
                secAlarming: 0,
                marksFan:{26:"26°C"}
            }
        },
        methods: {
            changedoor(){
                this.doorState=this.doorState?0:1;
                axios.post("/devicecontrol",{route:"changedoorstate",data:{deviceID:this.doorID,changeDoorState:this.doorState}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changesec(){
                this.secMode=this.secMode?0:1;
                axios.post("/devicecontrol",{route:"changesecmode",data:{deviceID:this.secID,changeSecMode:this.secMode}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changefanstate(){
                this.fanState=(this.fanState!=2?++this.fanState:0);
                axios.post("/devicecontrol",{route:"changefanstate",data:{deviceID:this.fanID,changeFanState:this.fanState}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changecover(){
                this.coverState=(this.coverState!=2?++this.coverState:0);
                axios.post("/devicecontrol",{route:"changecoverstate",data:{deviceID:this.coverID,changeCoverState:this.coverState}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changecoveropenillu(){
                axios.post("/devicecontrol",{route:"changecoveropenillu",data:{deviceID:this.coverID,changeCoverOpenIllu:this.coverOpenIllu}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changefanopentemp(){
                axios.post("/devicecontrol",{route:"changefanopentemp",data:{deviceID:this.fanID,changeFanOpenTemp:this.fanOpenTemp}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changelevel(){
                axios.post("/devicecontrol",{route:"changelevel",data:{deviceID:this.lampID,changeLevel:this.lampState}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changelight(){
                const hexToRgb=(hex)=> {
                    return [parseInt('0x' + hex.slice(1, 3)) , parseInt('0x' + hex.slice(3, 5)) , parseInt('0x' + hex.slice(5, 7))];
                };
                [this.R,this.G,this.B]=hexToRgb(this.lampColor);
                axios.post("/devicecontrol",{route:"changelight",data:{deviceID:this.lampID,changeLight:0,R:this.R,G:this.G,B:this.B}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
            },
            changedoorpsw(){
                let psw=document.getElementById("psw1").value;
                let re=/^\d{6}$/;
                if(!re.exec(psw)){
                    alert("Password must be 6 digits.")
                    return;
                }
                if (psw==document.getElementById("psw2").value){
                    axios.post("/devicecontrol",{route:"changedoorpsw",data:{deviceID:this.doorID,changePsw:psw}}).then((resp)=>{
                        if(resp.data.success){alert("Change success!")}
                    });
                }else{
                    alert("Two inputs do not match!");
                }
            }
        },
        mounted() {
            const refresh=()=>{
                axios.get("/deviceinfo").then((response) => {
                    const info = response.data.data;
                    console.log(info);
                    for (let i of info) {
                        console.log(i.Type);
                        switch (i.Type) {
                            case "Cover":
                                this.coverID = i.deviceID;
                                this.coverIllu = i.Illumination;
                                this.coverOpenIllu = i.OpenIllumination;
                                this.coverState = i.State;
                                break;
                            case "Door":
                                this.doorID = i.deviceID;
                                this.doorCount = i.OpenTimes;
                                this.doorState = i.State;
                                break;
                            case "Fan":
                                this.fanHumi = i.Humi;
                                this.fanID = i.deviceID;
                                this.fanOpenTemp = i.OpenTemp;
                                this.fanState = i.State;
                                this.fanTemp = i.Temp;
                                break;
                            case "FireAlarm":
                                this.fireAlarm = i.AlarmTriggered;
                                break;
                            case "Lamp":
                                this.lampID = i.deviceID;
                                this.lampOpt = i.Color;
                                this.lampState = i.State;
                                this.lampR = i.R;
                                this.lampG = i.G;
                                this.lampB = i.B;
                                this.lampColor="#" + ((1 << 24) + (i.R << 16) + (i.G << 8) + i.B).toString(16).slice(1);
                                break;
                            case "Alarm":
                                this.secID = i.deviceID;
                                this.secAlarming = i.AlarmTriggered;
                                this.secMode = i.AlarmMode;
                                break;
                            case "Window":
                                this.winID = i.deviceID;
                                this.winCount = i.OpenTimes;
                                this.winState = i.State;
                                break;
                        }
                    }
                }

                )
            };
            setInterval(refresh , 5000);
            refresh();
        }

    });
    // var qwe1 = new Vue({
    //     el: '#app11',
    //     data() {
    //         return {
    //             value1: 0,
    //             value2: 0
    //         }
    //     },
    //     methods: {
    //         post: function () {
    //             //发送 post 请求
    //             axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php', {
    //                 firstName: 'Fred',        // 参数 firstName
    //                 lastName: 'Flintstone'    // 参数 lastName
    //             })
    //                 .then(function (response) {
    //                     console.log(response);
    //                     this.info = response
    //                     document.write(response.data.name);
    //                     document.write(response.data.url);
    //                 })
    //                 .catch(function (error) {
    //                     console.log(error);//请求失败处理
    //                 });
    //         }
    //     }
    // })
    // var asd1 = new Vue({
    //     el: '#app22',
    //     data() {
    //         return {
    //             color1: '#409EFF',
    //             color2: null
    //         }
    //     }
    // })
    
</script>

</html>